<html>    
    <head>
        <title>Weeping Hollow</title>
        <style>
			body { background-color: black }
            #chart_div { 
                background: url('images/19954.png') 0 40px no-repeat black;    
                padding: 15px 15px 15px 15px;				
                width: 930px !important;
                height: 1159px !important;
				z-index:5;
            }
			rect[fill='#333333'] {
			display: none;
			}			
    </style>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1-rc2/jquery.js"></script>
    <script src="https://www.google.com/jsapi?x.js"></script>
    <script src="../../../LocationTrackerData/locations.19954.js"></script>
	
    </head>
    <body>
        <div id="chart_div" style="width: 871px; height: 1159px;"></div>


    <script>

        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

		if(typeof data19954 == "undefined"){
			alert("Data file not found:\n\n /LocationTrackerData/locations.19954.js");
		}
		
        function drawChart() {

            var datatable = new google.visualization.DataTable();

            datatable.addColumn('number', 'X');
            datatable.addColumn('number', 'Elite');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Unique');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Rare');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Goblin');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Objective');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Cursed Event');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Portal');
            datatable.addColumn({ type: 'string', role: 'tooltip' });

			/*
			var data19954 = [
				[2064,2171,'AlignmentMark1',null,'',null,'',null,'',null,'',null,'',null,''],
				[2220,2529,'AlignmentMark2',null,'',null,'',null,'',null,'',null,'',null,''],
				[1767,2626,'AlignmentMark3',null,'',null,'',null,'',null,'',null,'',null,''],
				[1916,2991,'AlignmentMark4',null,'',null,'',null,'',null,'',null,'',null,''],
				[2383,2934,'AlignmentMark5',null,'',null,'',null,'',null,'',null,'',null,''],
				[1688,2310,'AlignmentMark6',null,'',null,'',null,'',null,'',null,'',null,''],
			]
				*/		
			
            datatable.addRows(data19954);


            var options = {
                title: 'Weeping Hollow (19954)',
                titlePosition: 'in',
                titleTextStyle: { color: 'white', fontSize: 14 },
				backgroundColor : { strokeWidth:5, fill:'transparent' },
				
                hAxis: {
                    title: '',
                    minValue: 1622,
                    maxValue: 2445,
                    viewWindowMode: "maximized",
                    textStyle: { color: 'white' },
                    gridlines: { color: 'black', count: 0 },
                    direction: 1
                },
                vAxis: {
                    title: '',
                    minValue: 2055,
                    maxValue: 3063,
                    viewWindowMode: "maximized",
                    gridlines: { color: 'black', count: 0 },
                    direction: -1
                },
                legend: {
                    position: 'in',
                    maxLines: 2,
                    textStyle: { color: 'white', fontSize: 13 }
                },
                backgroundColor: 'transparent',
                chartArea: {
                    left: 0,
                    top: 0,
                    width: 920,
                    height: 1150
                },
            };
			

            /*
            var series = {
                0: {
                    hidden: false,
                    visibleInLegend: true,
                    color: 'royalblue'
                },
                1: {
                    hidden: false,
                    visibleInLegend: true,
                    color: 'red'
                },
                2: {
                    hidden: false,
                    visibleInLegend: false,
                    color: 'green'
                },
                3: {
                    hidden: false,
                    visibleInLegend: true,      
                    color: 'grey',
                },
                4: {
                    hidden: false,
                    visibleInLegend: false,
                    color: 'yellow'
                },
                5: {
                    hidden: false,
                    visibleInLegend: true,      
                    color: 'darkorange',
                },
                6: {
                    hidden: false,
                    visibleInLegend: true,      
                    color: 'darkblue',
                },   
            };      
            options.series = series;
            */

            var d = document.getElementById('chart_div');
            var view = new google.visualization.DataView(datatable);
            chart = new google.visualization.ScatterChart(d);
            chart.draw(view, options);

            // Store an array of the original column indexes so we can reset
            var originalcolumns = [];
            for (var i = 0; i < datatable.getNumberOfColumns() ; i++) {
                originalcolumns.push(i);
            }

            var drilled = false;

            google.visualization.events.addListener(chart, 'select', function(){
			
                // if row is undefined, we clicked on the legend
                if (!chart.getSelection()[0]['row']) {

                    if (drilled) {
                        // reset
                        view.setColumns(originalcolumns);
                        chart.draw(view, options);
                        drilled = false;
                        return;
                    }

                    var selectedindex = chart.getSelection()[0]['column'];
                    var totalcolumns = datatable.getNumberOfColumns();
                    var newcolumns = [];

                    // put the columns we want to keep in the new columns array
                    for (var i = 0; i < totalcolumns; i++) {

                        isPreviousSelected = (i - 1 > 0 && i - 1 == selectedindex);
                        isTooltip = (datatable.getColumnRole(i) == "tooltip");

                        if (i == 0 || i == selectedindex || isTooltip && isPreviousSelected) {
                            newcolumns.push(i);
                        }
                    }

                    view.setColumns(newcolumns);
                    chart.draw(view, options);
                    drilled = true;

                }
				
			});
			


        }




    </script>
	</body>
</html>